<template>
	<view class="content">
		<!-- 搜索订单结果 -->
		<view class="search-box flex-center-between">
			<view class="search-input" @tap="goBack">
				<input type="text" placeholder="请输入你需要的关键词" disabled
					v-model.trim="title" class="font32 color333"
					placeholder-class="placeholder-class" confirm-type="search">
				<image v-show="title != ''" src="/static/image/delete.png" mode=""></image>
			</view>
			<view class="search-btn font32" @tap="goBack">取消</view>
		</view>
		
		<!-- 订单列表 -->
		<order v-for="(item, index) in orderList" :key="index" :item='item' v-if="showShop" :index='index'
			@del='del' @cancel='cancel' @pay='pay' @confimOrder='confimOrder'></order>
			
		<uni-load-more :status="loadingType" :contentText="contentText" v-if="showShop"></uni-load-more>
		<!-- 无数据展示 -->
		<empty title="暂无搜索到相关内容" v-if="!showShop"></empty>
	</view>
</template>

<script>
import Api from '@/common/api'
import order from '@/components/order.vue'
import empty from '@/components/empty'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	data() {
		return {
			title: '', // 搜索内容
			orderList: [], // 订单列表
			pageNum: 1,
			loadingType: 'loading', //加载更多状态
			showShop: true, // 默认展示搜索结果
			contentText: {contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "已经是最后一个订单了"},
		}
	},
	onLoad(options) {
		this.title = options.name
		this.loadData()
	},
	// 加载更多
	onReachBottom() {
		this.pageNum += 1
		this.loadData()
	},
	methods: {
		// 返回
		goBack() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			})
		},
		//获取订单列表
		async loadData(type = 'add') {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			} else {
				// 没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				
				let data = await Api.apiCall('get', Api.order.allOrderList, { 
					keyWord: this.title,
					pageIndex: this.pageNum, 
					pageSize: 10 ,
				})
				if(!data) return
				let orderList = data.recordList
				this.orderList = this.orderList.concat(orderList)
				
				if(this.orderList.length === 0) {
					// 搜索不到相关订单
					this.showShop = false
				}
		
				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType = data.hasMore == 0 ? 'nomore' : 'more'
			}
		},
		// 删除数据
		del(index) {
			this.orderList.splice(index, 1)
		},
		// 取消
		cancel(index) {
			this.orderList[index].orderStatus = 4
		},
		// 立即付款
		pay(money, orderId) {
			this.money = money
			this.$common.navigateTo('/pages/money/money?type=order&orderId=' + orderId)
		},
		// 确认收货
		confimOrder(index) {
			this.orderList[index].orderStatus = 3
		},
	},
	components: {
		uniLoadMore,
		empty,
		order,
	},
}
</script>

<style lang="scss">
page {
	background-color:#f7f7f7 !important;
	.content {
		padding-top: 88rpx;
	}
}
.search-box {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
}

/* 搜索结果 */
.search-box {
	padding: 0 30rpx;
	.search-input {
		position: relative;
		input {
			width: 590rpx;
			height: 70rpx;
			letter-spacing: 1rpx;
			border: 0;
			border-radius: 32rpx;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding: 0 76rpx 0 26rpx;
			margin: 0;
			background-color: #f5f5f5;
		}
		image {
			position: absolute;
			top: 17rpx;
			right: 20rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}
	
	.placeholder-class {
		color: #9e9e9e;
	}
	
	.search-btn {
		width: 66rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #A66354;
	}
}

/* load-more */
.uni-load-more {
	margin-top: 20rpx;
	background-color: #fff;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	height: 80upx;
	align-items: center;
	justify-content: center;
}
</style>
